<template>
  <div>
    <Container>
      <van-cell-group>
        <van-cell>
          <template #title>
            <div class="icon_left">图像</div>
          </template>
          <template #default>
            <div class="defalut_img">
              <van-image
                round
                width="3rem"
                height="3rem"
                src="https://img.yzcdn.cn/vant/cat.jpeg"
              />
              <van-icon name="arrow" />
            </div>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <div class="icon_left">手机号</div>
          </template>
          <template #default>
            <div class="icon_right">
              {{ userName }} <van-icon name="arrow" />
            </div>
          </template>
        </van-cell>
      </van-cell-group>
      <div class="button_container">
        <van-button type="danger" @click="onBack">退出登录</van-button>
      </div>
    </Container>
  </div>
</template>
<script>
import Container from "../components/container/Container"; //引入子组件（容器组件）
import Vue from "vue";
import { Cell, CellGroup, Image as VanImage, Icon, Button } from "vant";

Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(Button);
export default {
  components: {
    Container,
  },
  data() {
    return {
      userName: "",
    };
  },
  mounted() {
    var user = localStorage.getItem("username");
    if (user) {
      this.userName = user;
    }
  },
  methods: {
      onBack(){//点击退出登录
        localStorage.removeItem("username");
        localStorage.removeItem("token");
        this.$router.pushRouteByQuery("/login")
      }
  },
};
</script>
<style lang="scss" scoped>
.icon_left {
  height: 100%;
  display: inline-flex;
  align-items: center;
}
.defalut_img {
  display: inline-flex;
  align-items: center;
}
.icon_right {
  display: inline-flex;
  align-items: center;
}
.button_container{
    width: 100%;
    height: 3rem;
    display: inline-flex;
    align-items: center;
    .van-button{
        width: 100%;
    }
}
</style>